<!--
*@Author: zt
*@Description: 人员管理
*@Date: 2024-08-14
-->
<template>
  <a-layout class="f-h-100 u-user-manager-box">
    <u-table-header>
      <a-form
        :model="searchF.model"
        :inline="true"
        class="f-search-tool-300"
        label-width="80px"
        layout="horizontal"
      >
        <a-form-item label="关键字查询">
          <a-input v-model:value="searchF.model.keywords" placeholder="导航名称">
          </a-input>
        </a-form-item>
      </a-form>
      <a-row>
        <u-icon-button itype="search" @click="getSearch(1)">查询</u-icon-button>

        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button itype="add" @click="toEdit(1)">新增</u-icon-button>
              <u-icon-button itype="edit" @click="toEdit(2)">
                修改
              </u-icon-button>
              <u-icon-button itype="close" @click="delBtn()">
                删除
              </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </a-row>
    </u-table-header>
    <u-table-content>
      <u-table
        :columns="columns"
        :data="tabData"
        :scroll="{ y: useTableScroll() }"
        @onDblclick="onDblclick"
        v-model:pagination="pagenation"
        @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
        @change="getSearch"
      />
    </u-table-content>
  </a-layout>
  <Edit
    v-model:open="showEdit"
    style="width: 50vw"
    :title="dialogTitle"
    :keyid="keyid"
    @success="getSearch(), (showEdit = false)"
    @close="getSearch(), (showEdit = false), (keyid = '')"
  />
</template>
<script lang="ts" setup>
import { Image } from 'ant-design-vue';
import { computed, onMounted, reactive, ref, watch, h } from 'vue';
import { useLoginStore, useBaseStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useTableScroll } from '@/hooks/useTable';
import { alertC } from '@/util/common';
import { formatImgUrl } from '@/util/format';
import dayjs from 'dayjs';
import Edit from './Edit.vue';
import * as navigationApi from '@/service/navigation/index';

const { userInfo } = storeToRefs(useLoginStore());

let keyid = ref('');
const dialogTitle = ref('');
let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
let searchF = reactive({
  model: {},
});
const showEdit = ref(false);
const tabData = ref([]);
const tabSelData = ref([]);
let columns = ref([
  {
    title: '序号',
    width: 50,
    align: 'center',
    dataIndex: 'index',
    customRender: ({ index }) => (index += 1),
  },
  {
    dataIndex: 'filepath',
    title: '图标',
    width: 100,
    align: 'center',
    customRender: ({ text }) => {
      console.log("🚀 ~ formatImgUrl(text):", formatImgUrl(text))
      return text ? h(Image, { src: formatImgUrl(text), preview: false, width: 50 }) : '';
    },
  },
  { dataIndex: 'name', title: '导航名称', width: 600 },
  { dataIndex: 'createtime', title: '创建时间', width: 200, align: 'center' },
]);

const onDblclick = record => {
  keyid.value = record['keyid'];
  showEdit.value = true;
};

onMounted(async () => {
  getSearch();
});

// 获取列表数据
const getSearch = async (current?: number) => {
  if (current == 1) {
    pagenation.current = 1;
  }
  let tform = JSON.parse(JSON.stringify(searchF));
  const res = await navigationApi.page({
    ...pagenation,
    size: pagenation.pageSize,
    ...tform,
  });
  if (res.code == 0) {
    let tData = res.data.records;
    tData.sort((a, b) => dayjs(b['createtime']) - dayjs(a['createtime']));
    tabData.value = tData;
    pagenation.total = res.data.total;
  }
};

//删除
const delBtn = async () => {
  if (tabSelData.value.length == 0) {
    return alertC('请先选择要删除的数据！');
  }
  alertC('确定删除选中的数据?', 'confirm').then(async () => {
    let ids = [];
    tabSelData.value.map(item => ids.push(item.keyid));
    const res = await navigationApi.del({ ids: ids.join(',') });
    if (res.code == 0) {
      alertC(res.msg, 'success');
      getSearch();
    } else {
      alertC(res.msg, 'warning');
    }
  });
};

// type 1 新增、type 2 修改按钮
const toEdit = (type?: number | string) => {
  if (type == '1') {
    dialogTitle.value = '导航新增';
  }
  // 修改
  else if (type == '2') {
    if (tabSelData.value.length != 1) {
      alertC('只能选择一条数据进行修改！');
      return;
    }
    keyid.value = tabSelData.value[0]['keyid'];
    dialogTitle.value = '导航修改';
  }
  showEdit.value = true;
};
</script>
<style lang="scss">
.u-jhk-serch-datepicker {
  .el-range-separator {
    padding: 0;
    width: unset;
  }
}

.u-user-manager-box {
  .ant-form-item {
    margin-bottom: 10px !important;
  }
}
</style>
